<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>将本地文件拖拽到浏览器待上传</title>
	<style>
		.box{
			width:800px;
			height:500px;
			border:2px dashed #ccc;
			border-radius:5px;
			margin: 10px auto;
			font-size:30px;
			color:#ccc;
			display:flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-around;
		}
		.box:hover{
			border-color:#FE7300;
		}

		.file{
			width:80px;
			height:80px;
			border:1px solid #ccc;
			border-radius:3px;
			background-color:#efecec;
			font-size:10px;
			color:#464242;
			margin:0 17px;
		}
		.file>p{
			text-align: center;
		}
	</style>
</head>
<body>
	
	<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)">上传文件</div>

<script>
	
		function drop(e){
				//阻止默认行为，比如浏览器读取文本或者图片
				e.preventDefault();
				//获取文件列表
				console.log("drop",e.dataTransfer.files);
				var fileList=e.dataTransfer.files;
				var formData=new FormData();
				var files='';
				for(let file of fileList){
					//将文件对象存入FormData对象
					formData.set(file.name,file);
					var tmp=`<div class="file">
								<p>${file.size}&nbsp;size</p>
								<p>${file.name}</p>
							</div>`;
					files+=tmp;
				}
				//console.log(formData.get("order"));
				
				//将生成的div放入box中
				e.target.innerHTML=files;

				//上传FormData对象


		}

		function allowDrop(e){
				e.preventDefault();
				console.log("dALLOWrop");
		}
</script>
</body>
</html>